<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示ajax和分页函数的结合</title>
		<style type="text/css">
			#paged li{
				float: left;
				list-style: none;
				border: #0000FF solid 1px;
				margin-right: 5px;
			}
			.current{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<ul id="dataBox">
		</ul>
		<ul id="paged"></ul>
		<script>
			var data_list = [];
			// 当前页数,从1开始,
			var page = 1;
			// 每页数据条数
			const page_size = 100;
			// 数据总数
			var data_length = 0;
			// 计算总页数的算法
			var page_num = 0; ;
			
			// 获取数据
			function loadName(){
				var xmlHttp = null;
				//判断浏览器是否优先支持XMLHttpRequest
				if(window.XMLHttpRequest){
					xmlHttp = new XMLHttpRequest();
				}else{
				//让IE老版本使用也可以使用Ajax
					xmlHttp = new ActiveXObject("Microsoft.XMLHttpRequest");
				}
				//默认状态
				//alert("ready状态："+xmlHttp.readyState+";"+"status状态："+xmlHttp.status);  0    0 
				//请求状态，请求分为四种状态
				//onreadystatechange  是存储函数，党readyState的状态改变就会调用这个onreadystatechange函数
				xmlHttp.onreadystatechange=function(){
					//请求进行状态
					//readyState有四种状态   0代表请求正在初始化   1与服务器建立请求成功    2代表服务器接受请求    3 代表服务器请求处理中      4 代表请求完成，响应已就绪
					if(xmlHttp.readyState==4 && xmlHttp.status==200){        //status   200 代表服务器响应内容状态OK   404代表服务器响应内容没找到
						//alert("ready状态："+xmlHttp.readyState+";"+"status状态："+xmlHttp.status);
						// console.log(xmlHttp.responseText);            //测试返回到的数据
						var dataObj = JSON.parse(xmlHttp.responseText);       //将服务器返回的Json对象转换为JS对象
 						// 页面变量若是需要ajax请求赋值.则需要声明为全局变量.
						data_list = dataObj.RECORDS;
						data_length = data_list.length;
						page_num = Math.ceil(data_length / page_size);
						selectPage(1);
// 						// 读取的数据中使用了RECORDS作为数据的name
// 						var results = dataObj.RECORDS;
// 						for(var i=0; i<results.length; i++){
// 							var film = results[i];
// 							document.write("电影id=" + film.film_id +",电影标题是:" + film.title + "<br />")
// 							document.write("简介：" + film.description +"<br />");
// 							document.write("发行时间:"+ film.release_year + "<br />");
// 							document.write("<hr />")
// 						}
					}
				}
				//get方式提交
				xmlHttp.open("get","film.json",true);
				xmlHttp.send();
				//post方式提交
// 				xmlHttp.open("post", "film.json", true);
// 				xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");    //表示按照表格post的方式提交
				// xmlHttp.send("name=jack&age=11");
			} 
			
			loadName();
			// 使用,处理数据
			// 给数据分页(分页函数)
			
			function selectPage(p){
				page = p;
				
				// 计算当前页面数据的起始索引(下标)
				var start_index = page_size * (page - 1);
				// 计算当前页面数据的结束下标
				var end_index = start_index + page_size;
				
				// 得到当前页面数据
				var result = data_list.slice(start_index, end_index)
				// console.log(result);
				var html = "";
				for(var i=0; i<result.length; i++){
				    html += "<li>";
					html += JSON.stringify(result[i]);
					html += "</li>"
				}
				document.getElementById('dataBox').innerHTML = html;
				
				var paged_html = ""
				for(var i=1; i<=page_num; i++){
					if(i == page){
						paged_html += "<li class='current'>"
					}else{
						paged_html += "<li onclick='selectPage(" + i + ")'>";
					}
					paged_html += i;
					paged_html += "</li>";
				}
				document.getElementById('paged').innerHTML = paged_html;
				// var data_length =  page * page_size
			}
		</script>
	</body>
</html>
